class List{
    constructor(){
        this.ocont = document.querySelector(".list-content ul");
        this.url = "data/goods.json";

        //商品列表请求
        this.getGoodsRequest();
        this.listArr = [];
        //加入购物车
        this.addCart();
        
    }
    addCart(){
        var that = this;
        this.ocont.addEventListener("click",function(eve){
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.className==="addCart" && tar.innerHTML !== "已加入购物车"){
                that.id = tar.getAttribute("data-id");
                that.price = tar.getAttribute("data-price");
                that.setCartData();
            }
        })
    }
    setCartData(){
        var shopData = localStorage.getItem("shopData") ? JSON.parse(localStorage.getItem("shopData")) : [];
        shopData.push({
            id:this.id,
            num: 1,
            price:this.price
        })
        localStorage.setItem("shopData",JSON.stringify(shopData));
        this.hasAdd();
    }
    getGoodsRequest(){
        $.ajax({
            url:this.url,
            success:(res)=>{
                this.res = JSON.parse(res);
                //匹配搜索结果的数据
                this.setListData();
                //对商品列表进行渲染
                this.listRender();
            }
        })
    }
    listRender(){
        var str = "";
        this.listArr.forEach(val=>{
                str += `<li>
                            <img src="${val.img}" alt="">
                            <h1>${val.name+val.xinghao+val.specification}</h1>
                            <div class="list-case-bottom">
                                <span class="list-price">￥${val.price}</span>
                                <span class="addCart" data-id=${val.goodsId} data-price=${val.price}>加入购物车</span>
                            </div>
                        </li>`;
            
        });
        document.querySelector(".current-sort").innerHTML = this.type;
        if(str !== ""){
            this.ocont.innerHTML = str;
            this.aLi = this.ocont.querySelectorAll("li");
            this.hasAdd();
        }
        
    }
    setListData(){
        this.type = decodeURI(location.search.slice(1).split("=")[1]);
        document.getElementById("nav-search").value = this.type;
        this.res.forEach((val,idx)=>{
            if(val.type===this.type){
                this.listArr.push(this.res[idx]);
            }
        })
    }
    hasAdd(){
        var shopDataNew = localStorage.getItem("shopData") ? JSON.parse(localStorage.getItem("shopData")) : [];
        for(let i=0;i<this.aLi.length;i++){
            shopDataNew.forEach((val)=>{
                if(this.aLi[i].querySelector(".addCart").getAttribute("data-id")===val.id){
                    this.aLi[i].querySelector(".addCart").innerHTML = "已加入购物车";
                    this.aLi[i].querySelector(".addCart").disabled = "disabled";
                    this.aLi[i].querySelector(".addCart").style.background = "grey";
                    return;
                }
            })
            
        }
        
    }
}
new List;